<!DOCTYPE html>
<html dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Input - Attributes</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <script src="/dist/ionic.js"></script>
</head>
<body>
  <ion-app>

      <ion-header>
        <ion-toolbar>
          <ion-title>Input - Attributes</ion-title>
          <ion-buttons slot="primary">
            <ion-button>
              <ion-icon slot="icon-only" name="menu"></ion-icon>
            </ion-button>
          </ion-buttons>
        </ion-toolbar>
      </ion-header>

      <ion-content>
        <ion-list>
          <ion-label id="itemless">My Label</ion-label>
          <ion-input aria-labelledby="itemless"></ion-input>

          <ion-item>
            <ion-label stacked>Number</ion-label>
            <ion-input
              id="input1"
              type="number"
              placeholder="Placeholder"
              value="1234"
              name="holaa"
              min="0"
              max="10000"
              step="2"
              autocomplete="on"
              autocorrect="on"
              autocapitalize="on"
              spellcheck="true"
              maxlength="4"
              disabled
              readonly
            ></ion-input>
          </ion-item>

          <ion-item id="custom">
            <ion-label stacked>Text</ion-label>
            <ion-input
              id="input2"
              type="text"
              placeholder="my placeholder"
              value="test"
            ></ion-input>
          </ion-item>

          <ion-item>
            <ion-label id="myLabel" stacked>Default</ion-label>
            <ion-input
              id="input3"
              value="inputs"
              ></ion-input>
          </ion-item>

          <ion-list>
            <ion-item>
              Number Test&nbsp;<span id="numberInputResult"></span>
            </ion-item>
            <ion-item>
              Text Test&nbsp;<span id="textInputResult"></span>
            </ion-item>
            <ion-item>
              Default Test&nbsp;<span id="defaultInputResult"></span>
            </ion-item>
          </ion-list>

        </ion-list>
      </ion-content>

    <script>
      var numberInput = checkInput('input1');
      updateResult(numberInput, 'numberInputResult');

      var textInput = checkInput('input2');
      updateResult(textInput, 'textInputResult');

      var defaultInput = checkInput('input3');
      updateResult(defaultInput, 'defaultInputResult');

      // Update results of input
      function updateResult(result, resultId) {
        var resultEl = document.getElementById(resultId);
        resultEl.innerHTML = result ? 'passed' : 'FAILED';

        var itemEl = resultEl.closest('ion-item');
        itemEl.color = result ? 'secondary' : 'danger';
      }

      function checkInput(id) {
        var el = document.getElementById(id);
        var inputEl = el.querySelector('input');

        if (id === 'input1') {
          return testAttributes(el, inputEl, {
            id: 'input1',
            type: 'number',
            placeholder: 'Placeholder',
            name: 'holaa',
            min: '0',
            max: '10000',
            step: '2',
            autocomplete: 'on',
            autocorrect: 'on',
            autocapitalize: 'on',
            spellcheck: 'true',
            maxLength: '4',
            'aria-labelledby': 'lbl-0',
            readonly: true,
            disabled: true
          });
        } else if (id === 'input2') {
          return testAttributes(el, inputEl, {
            id: 'input2',
            type: 'text',
            placeholder: 'my placeholder',
            value: 'test',
            readonly: undefined,
            disabled: undefined
          });
        } else if (id === 'input3') {
          return testAttributes(el, inputEl, {
            id: 'input3',
            type: undefined,
            value: 'inputs',
            readonly: undefined,
            disabled: undefined
          });
        }
        return false;
      }

      function testAttributes(el, inputEl, attributes) {
        for (let attr in attributes) {
          const expected = attributes[attr];
          const value = el[attr];

          if (expected === null) {
            if (el.hasAttribute(attr) || value !== '') {
              console.error(`Element should NOT have "${attr}"`);
              return false;
            }
          } else {
            if (expected !== value && expected !== el.getAttribute(attr)) {
              console.error(`Value "${attr}" does not match: ${expected} != ${value}`);
              return false;
            }
          }
        }
        return true;
      }

    </script>
  </ion-app>
</body>
</html>



